<template>
  <el-dialog v-model="open" :title="`${route.meta.title}：${title}`" @open="initOpen" @close="close">
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
      <el-form-item label="省" prop="dataRangeProvince">
        <el-select v-model="queryParams.dataRangeProvince" @change="chooseProvince" clearable>
          <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="市" prop="dataRangeCity">
        <el-select v-model="queryParams.dataRangeCity" @change="chooseCity" clearable>
          <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区县" prop="dataRangeArea">
        <el-select v-model="queryParams.dataRangeArea" placeholder="区县" clearable>
          <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button plain @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <el-table :data="tableList" v-loading="loading" @row-click="rowClick">
      <el-table-column label="选择" width="55" align="center">
        <template #default="{ row }">
          <el-radio-group v-model="selectedId">
            <el-radio :label="flag ? row.versionCode : row.versionCode">{{ '' }}</el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
      <el-table-column type="index" label="序号" width="55" align="center" />
      <el-table-column label="数据范围" prop="dataRange" align="center" v-if="isDataRange"/>
      <el-table-column label="省" prop="provinceName" align="center" v-if="!isDataRange"/>
      <el-table-column label="数据名称" prop="dataName" align="center" />
      <el-table-column label="数据版本号" prop="versionCode" align="center">
        <template #default="{ row }">
          <span v-if="flag">{{ row.versionCode }}</span>
          <span v-else>{{ row.versionCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="版本说明" prop="versionDesc" align="center" />
      <el-table-column label="创建人" prop="uploadUser" align="center" />
      <el-table-column label="创建时间" prop="uploadTime" align="center" />
    </el-table>
    <pagination v-show="queryParams.total > 0" :total="queryParams.total" v-model:page="queryParams.page"
      v-model:limit="queryParams.rows" @pagination="getList" />
    <template #footer>
      <el-button type="primary" @click="confirm" auto-insert-space>确定</el-button>
      <el-button plain @click="close" auto-insert-space>取消</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { getProvince, getChildArea } from "@/api/system/division"
import { getBuildingVersion, getBeyondProbabilityVersion } from "@/api/building"
import { listAdministrativeArea } from '@/api/basicDataManage/kilometerGrid/index.js'

const props = defineProps({
  open: Boolean,
  title: String,
  selected: String,
  houseDataFlag: String,
  type: String,
  ldPga: String
})
const emits = defineEmits(['update:open', 'getVersionCode'])
const route = useRoute()
const isDataRange = computed(() => ['beyondProbabilisticVersion','fourProbabilisticVersions'].includes(props.type))
const flag = computed(() => props.houseDataFlag == '0' && props.type == 'houseData')
const { proxy } = getCurrentInstance()
const provinceData = ref([])
const cityData = ref([])
const areaData = ref([])
const queryParams = ref({
  page: 1,
  rows: 10,
  total: 0
})
const getProvinceData = () => {
  getProvince().then(response => {
    provinceData.value = response.data
  })
}
const chooseProvince = (value) => {
  queryParams.value.cityId = null
  queryParams.value.countyId = null
  cityData.value = []
  areaData.value = []
  getChildArea(value).then(response => {
    cityData.value = response.data
  })
}
const chooseCity = (value) => {
  projectParams.value.countyId = null
  areaData.value = []
  getChildArea(value).then(response => {
    areaData.value = response.data
  })
}
const tableList = ref([])
const loading = ref(false)
const selectedId = ref('')

const getList = () => {
  loading.value = true;
  switch (props.type) {
    case 'houseData':
      if (props.houseDataFlag == '0') {
        getHouseData0()
      } else if (props.houseDataFlag == '1') {
        getHouseData1()
      }
      break;
    case 'fourProbabilisticVersions':
    case 'beyondProbabilisticVersion':
      getFourProbabilistic()
      break;
    case 'occurrenceProbabilityVersion':
      getOccurrenceProbability()
      break;
    // case 'beyondProbabilisticVersion':
    //   getBeyondProbabilistic()
    //   break;
    default:
      break;
  }

}
// 房屋单体数据
const getHouseData0 = () => {
  getBuildingVersion({ ...queryParams.value }).then(response => {
    tableList.value = response.data.rows || []
    queryParams.value.total = response.data.total
    loading.value = false
  }).catch(() => loading.value = false)
}
// 房屋网格数据
const getHouseData1 = () => {
  listAdministrativeArea({ ...queryParams.value }).then(response => {
    tableList.value = response.data.list || []
    queryParams.value.total = response.data.total
    loading.value = false
  }).catch(() => loading.value = false)
}
// 四个概率
const getFourProbabilistic = () => {
  let typeCode = props.ldPga == '0' ? 'jcld' : 'pga'
  getBeyondProbabilityVersion({ ...queryParams.value, typeCode }).then(response => {
    tableList.value = response.data.list || []
    queryParams.value.total = response.data.total
    loading.value = false
  }).catch(() => loading.value = false)
}
// 发生概率
const getOccurrenceProbability = () => {

}
// 超越概率
// const getBeyondProbabilistic = () => {

// }
const rowClick = (row) => {
  // 四个概率、发生概率、超越概率还需修改
  selectedId.value = props.houseDataFlag == '0' ? row.versionCode : row.versionCode
}
const handleQuery = () => {
  queryParams.value.page = 1;
  getList()
}
const resetQuery = () => {
  proxy.resetForm("queryRef");
  handleQuery()
}
const initOpen = () => {
  console.log('打开');
  getProvinceData()
  getList()
  selectedId.value = props.selected
}
const close = () => {
  emits('update:open', false)
}
const confirm = () => {
  emits('getVersionCode', selectedId.value)
  close()
}
</script>